<div>
	<!-- forms -->
	<form nz-form [formGroup]="validateForm" (ngSubmit)="_submitForm()">
		<!-- username -->
		<div nz-form-item nz-row>
			<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
				<label for="username" nz-form-item-required>Username</label>
			</div>
			<div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
				<nz-input [nzSize]="'large'" formControlName="username" [nzId]="'username'"></nz-input>
				<div nz-form-explain
					*ngIf="getFormControl('username').dirty&&getFormControl('username').hasError('username')">
					The input is not valid Username!
				</div>
			</div>
		</div>
		<!-- row for email -->
		<div nz-form-item nz-row>
			<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
				<label for="email" nz-form-item-required>E-mail</label>
			</div>
			<div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
				<nz-input [nzSize]="'large'" formControlName="email" [nzId]="'email'"></nz-input>
				<div nz-form-explain *ngIf="getFormControl('email').dirty&&getFormControl('email').hasError('email')">
					The input is not valid E-mail!
				</div>
			</div>
		</div>
		<!-- password -->
		<div nz-form-item nz-row>
			<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
				<label for="password" nz-form-item-required>Password</label>
			</div>
			<div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
				<nz-input [nzSize]="'large'" formControlName="password" [nzType]="'password'" 
					[nzId]="'password'" (ngModelChange)="updateConfirmValidator()"></nz-input>
				<div nz-form-explain 
					*ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">
					Please input your password!
				</div>
			</div>
		</div>
		<div nz-form-item nz-row>
			<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
				<label for="checkPassword" nz-form-item-required>Confirm</label>
			</div>
			<div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
				<nz-input [nzSize]="'large'" formControlName="checkPassword" [nzType]="'password'" [nzId]="'checkPassword'"></nz-input>
				<div nz-form-explain 
					*ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('required')">
					Please confirm your password!
				</div>
				<div nz-form-explain 
					*ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('confirm')">
					Two passwords that you enter is inconsistent!
				</div>
			</div>
		</div>
		<!-- Real name -->
		<div nz-form-item nz-row>
			<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
				<label for="realname">Realname</label>
			</div>
			<div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
				<nz-input [nzSize]="'large'" formControlName="realname" [nzId]="'realname'"></nz-input>
			</div>
		</div>
		<!-- Realm -->
		<div nz-form-item nz-row>
			<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
				<label for="realm">Realm</label>
			</div>
			<div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
				<nz-input [nzSize]="'large'" formControlName="realm" [nzId]="'realm'"></nz-input>
			</div>
		</div>
		<!-- admin -->
		<div nz-form-item nz-row style="margin-bottom:8px;">
			<div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
				<label nz-checkbox formControlName="admin">
					<span>created as an <strong>Administrator</strong></span>
				</label>
			</div>
		</div>

		<div class="customize-footer">
			<button type="button" nz-button [nzType]="'default'" [nzSize]="'large'" (click)="handleCancel($event)">
				返 回
			</button>
			<button nz-button [nzType]="'primary'" [nzSize]="'large'" [nzLoading]="isConfirmLoading">
				创 建
			</button>
		</div>
	</form>
</div>